<template>
    <view>
        <image src="/static/images/xsb/top_bg.png" class="w-[100%] h-[310rpx] z-[-1] fixed top-0"></image>
        <view>
            <view
                class="w-[100%] text-[24rpx] font-[500] text-[#000] px-[40rpx] flex justify-between items-center py-[30rpx]">
                <!-- <text>请选择购买线索包的城市</text>
                <text>武汉市 ></text> -->
            </view>
            <view class="bg-[#F7F7F7] w-[100%] px-[30rpx] pb-[36rpx] pt-[10rpx]"
                style="border-top-left-radius: 40rpx; border-top-right-radius: 40rpx;">
                <view class="w-[100%] flex justify-center items-center">
                    <up-tabs inactiveStyle="font-size: 24rpx;color: #666;" @change="tabsChange"
                        activeStyle="font-weight: 600;font-size: 24rpx;color: #000000;"
                        :lineColor="`linear-gradient( 98deg, #FFF1B8 0%, #FFD856 100%)`" :list="tabs"
                        @click="tabsClick"></up-tabs>
                </view>
                <view class="w-[100%] mt-[16rpx] grid grid-flow-row gap-[20rpx] grid-cols-3">
                    <view v-for="(item, index) in filteredPackageList" :key="item.id" @click="selectPackage(index)"
                        :style="selectedPackageIndex == index ? {
                            background: 'linear-gradient( 98deg, #454545 0%, #000000 100%)',
                            color: '#FFEFB8'
                        } : {
                            color: '#FFEFB8',
                            background: '#fff',
                            color: '#000000',
                            border: '2rpx solid #FFEFB8'
                        }" class="w-[216rpx] rounded-[16rpx] flex flex-col justify-center items-center text-[40rpx]  h-[96rpx]">
                        <text>￥{{ item.amount }}</text>
                        <text class="text-[20rpx]">{{ item.number }}次</text>
                    </view>
                </view>
                <!-- <view class="mt-[24rpx] mb-[60rpx]">
                    <view class="text-[24rpx] text-[#000] mb-[40rpx]">自定义</view>
                    <view class="px-[20rpx] flex items-center">
                        <text>￥</text>
                        <up-input placeholder="请输入" type="digit" border="bottom" v-model="value"></up-input>
                    </view>
                </view> -->
                <view class="mb-[70rpx] mt-[50rpx]">
                    <view class="text-[#000] text-[32rpx]  mb-[40rpx]">套餐优势</view>
                    <view class="w-[100%] grid grid-flow-row gap-[24rpx] grid-cols-2">
                        <view class="flex flex-col text-[#000000] justify-center items-center">
                            <image src="/static/images/xsb/yh.png" class="w-[108rpx] h-[108rpx]"></image>
                            <text class="text-[28rpx] mb-[4rpx] mt-[20rpx]">人工确认</text>
                            <text class="text-[20rpx]">人工确认个人车源</text>
                        </view>
                        <view class="flex flex-col text-[#000000] justify-center items-center">
                            <image src="/static/images/xsb/qc.png" class="w-[108rpx] h-[108rpx]"></image>
                            <text class="text-[28rpx] mb-[4rpx] mt-[20rpx]">高效收车</text>
                            <text class="text-[20rpx]">收车率提升 25%</text>
                        </view>
                        <view class="flex flex-col text-[#000000] justify-center items-center">
                            <image src="/static/images/xsb/tx.png" class="w-[108rpx] h-[108rpx]"></image>
                            <text class="text-[28rpx] mb-[4rpx] mt-[20rpx]">优先推送</text>
                            <text class="text-[20rpx]">优先推送抢先收车</text>
                        </view>
                        <view class="flex flex-col text-[#000000] justify-center items-center">
                            <image src="/static/images/xsb/fk.png" class="w-[108rpx] h-[108rpx]"></image>
                            <text class="text-[28rpx] mb-[4rpx] mt-[20rpx]">加快周转</text>
                            <text class="text-[20rpx]">收车后平台帮卖</text>
                        </view>
                    </view>
                </view>
                <view>
                    <view class="text-[#000] text-[32rpx] mb-[40rpx]">套餐优势</view>
                    <view class="flex flex-col text-[24rpx] leading-[48rpx]">
                        <text class="text-[#000]">1.派发方式 </text>
                        <text class="text-[#666]">每日实时派发未被分发的超级，共享线索，派发数量不会超过指定上限，接受时有时无</text>
                        <text class="text-[#000]">2.线索地区</text>
                        <text class="text-[#666]">按选择的地级市派发当地线索</text>
                        <text class="text-[#000]"> 3.使用说明</text>
                        <text class="text-[#666]">每派发一条线索扣除一条线索包次数，线索可申诉</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="px-[32rpx] mt-[60rpx] h-[88rpx]">
            <up-button @click="zf" text="前往支付"
                :customStyle="{
                    color: '#FFEFB8',
                    padding: '12rpx 74rpx',
                    fontWeight: '500',
                    borderRadius: '16rpx',
                    fontSize: '28rpx',
                    lineHeight: '40rpx',
                    background: 'linear-gradient( 98deg, #454545 0%, #000000 100%)'
                }"></up-button>
        </view>
    </view>
    <popup-login v-model="userStore.showLoginPopup" />
</template>
<script setup>
import { ref, computed } from 'vue'
import { onLoad, onPageScroll } from '@dcloudio/uni-app'
import { getPayList, createOrder } from '@/api/pay.js'
import useUserStore from '@/store/modules/user';

const userStore = useUserStore();
const tabs = ref([
    { name: '超级线索', clueType: 0 },
    { name: '超级共享', clueType: 1 },
])
const selectedClueType = ref(0); // 0: 超级线索, 1: 共享线索
const packageList = ref([]);
const selectedPackageIndex = ref(0);
// const value = ref('')

const getlist = () => {
    getPayList().then(res => {
        if (res.code == 200) {
            packageList.value = res.rows;
            // 默认选中第一个过滤后的套餐
            if (filteredPackageList.value.length > 0) {
                selectedPackageIndex.value = 0;
            }
        } else {
            uni.$u.toast(res?.msg);
        }
    })
}

// Computed property to filter package list based on selectedClueType
const filteredPackageList = computed(() => {
    return packageList.value.filter(item => item.clueType == selectedClueType.value);
});

// Select clue type and reset selected package index
const tabsChange = (item) => {
    selectedClueType.value = item.clueType;
    selectedPackageIndex.value = 0; // Reset selected package index when changing type
};

// 选择套餐方法
const selectPackage = (index) => {
    selectedPackageIndex.value = index;
};

const zf = () => {
    // 获取当前选中的套餐
    if (!filteredPackageList.value || filteredPackageList.value.length == 0 || selectedPackageIndex.value == -1) {
        uni.$u.toast('请选择有效的套餐');
        return;
    }

    const selectedPkg = filteredPackageList.value[selectedPackageIndex.value];

    // 创建订单数据
    const orderData = {
        cluePackageId: selectedPkg.id // 传递当前选中套餐id
    };

    // 调用创建订单接口
    createOrder(orderData).then(res => {
        if (res.code == 200) {
            // 订单创建成功，跳转到支付页面
            uni.navigateTo({
                url: `/pages_qc/pay/pay?orderNo=${res.data.outTradeNo}&amount=${selectedPkg.amount}`
            });
        } else {
            uni.$u.toast(res?.msg || '创建订单失败');
        }
    }).catch(err => {
        console.error('创建订单失败', err);
        uni.$u.toast('创建订单失败，请稍后重试');
    });
};

onLoad(() => {
    getlist();
})
</script>
<style scoped lang="scss">
.package-item {
    width: 216rpx;
    height: 96rpx;
    border-radius: 16rpx;
    background-color: #fff;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 20rpx;
    position: relative;
    border: 2rpx solid transparent;
    transition: all 0.3s;
}

.package-item-active {
    border: 2rpx solid #FFEFB8; /* 金色边框 */
}

.package-title {
    font-size: 28rpx;
    font-weight: 500;
    color: #333;
    margin-bottom: 8rpx;
}

.package-price {
    font-size: 32rpx;
    font-weight: bold;
    color: #D4AF37; /* 金色价格 */
}

.package-times {
    font-size: 20rpx;
    color: #999;
    margin-top: 4rpx;
}

.type-button {
    padding: 10rpx 20rpx;
    border: 1px solid #ccc;
    border-radius: 10rpx;
    background-color: #f9f9f9;
    color: #333;
    font-size: 28rpx;

    &.active {
        background-color: #007aff;
        color: #fff;
        border-color: #007aff;
    }
}
</style>